<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-07-14 10:32:49
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-07-26 09:10:05
 * @FilePath: \出口卖家端\src\views\IndividualCenter\MemberCenter\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <c-main-template minHeight="auto" title="会员中心" :isBreadcrumb="false">
    <div class="amount-statis flex-y-center">
      <div class="flex-1">
        <div class="flex-y-center">
          <div class="amount-statis_img">
            <img src="@/assets/img/member-credit.png" />
          </div>
          <div class="member-money ml-lg">
            {{ filters.thousands(sumAmount.sumAmount) }}
          </div>
        </div>
        <div class="describe">会员金额（￥）</div>
      </div>
      <div class="flex-1">
        <div class="flex-y-center">
          <div class="amount-statis_img">
            <img src="@/assets/img/member-credit_grey.png" />
          </div>
          <div class="money ml-lg">
            {{ filters.thousands(sumAmount.currentAmount) }}
          </div>
        </div>
        <div class="describe">剩余金额（￥）</div>
      </div>
      <div class="flex-1" v-if="sumAmount.timeExpiry">
        <div class="flex-y-center">
          <div class="amount-statis_img">
            <el-icon><Calendar /></el-icon>
          </div>
          <div class="money ml-lg">
            {{ filters.dateYMDHMSFormat(sumAmount.timeExpiry) }}
          </div>
        </div>
        <div class="describe">会员有效期</div>
      </div>
    </div>
  </c-main-template>
  <c-main-template
    class="mt-lg"
    minHeight="auto"
    title="会员中心"
    v-loading="loading"
    :isBreadcrumb="false"
  >
    <c-table-template :data="tableData">
      <el-table-column align="center" type="index" label="序号" width="60" />
      <el-table-column align="center" label="消费金额(元)">
        <template #default="scope">
          {{ filters.thousands(scope.row.amount) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
    </c-table-template>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
  <c-member-details />
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { Calendar } from "@element-plus/icons-vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import cMemberDetails from "./components/c-member-details.vue";
const { proxy } = getCurrentInstance();
const sumAmount = ref({});

const {
  querys,
  tableData,
  loading,
  total,
  handleReset,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/sellerAmount/amountLogPage",
});
onMounted(() => {
  proxy.$get({ url: "/sellerAmount/sellerAmount" }).then((res) => {
    sumAmount.value = res;
  });
});
</script>

<style lang="less" scoped>
.amount-statis {
  margin-left: 40px;
  margin-top: 30px;
  margin-bottom: 30px;
  .el-icon {
    font-size: 23px;
    color: #bbbbbb;
  }
  .amount-statis_img {
    width: 24px;
    height: 24px;
  }
  .member-money {
    font-weight: bold;
    color: #ee5b5b;
    font-size: 28px;
  }
  .money {
    font-weight: bold;
    font-size: 28px;
    color: #092036;
  }
  .describe {
    margin-top: 8px;
    margin-left: calc(24px + 16px);
  }
}
</style>